<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@  page import="java.util.Map"%>
<%@  page import="java.util.HashMap"%>
<%@  taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>pay</title>
</head>
<link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet"
	type="text/css" />
<link href="basic/css/demo.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/site-nav.css">
<link rel="stylesheet" href="css/cart.css">
<link href="css/jsstyle.css" rel="stylesheet" type="text/css" />

<script src="js/basevalue.js"></script>
<script type="text/javascript" src="js/address.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script>
//返回刷新页面
$(document).ready(function(e) {
if (window.history && window.history.pushState) {

$(window).on('popstate', function () {

window.history.pushState('forward', null, '#');

//window.history.forward(1);
window.location.href="myshoppingCart.do";
});
}
window.history.pushState('forward', null, '#'); //在IE中必须得有这两行
//window.history.forward(1);
});

</script>

<body>

	<!--顶栏-->
	<div class="site-nav">
		<div class="sn-bg"></div>
		<div class="sn-con">
			<p class="sn-home">
				<i class="am-icon-home"></i> <a href="index.html">爱购首页</a>
			</p>
			<p class="sn-login-info">
				<c:if test="${ empty sessionScope.u.nickname }" var="login">
					<span>汪, 欢迎来到爱购 </span>
					<span> &nbsp;<a href="login.jsp">请登录</a>
					</span>
					<span class="sn-logout-info"> <a href="regist.jsp">免费注册</a>
					</span>
				</c:if>
				<c:if test="${!login }">
					<span>Hi, <a href="">${sessionScope.u.nickname }</a>
					</span>
					<span> <i class="am-icon-comments"></i>&nbsp;消息<a href="">3</a>
					</span>
					<span class="sn-logout-info"> <a href="user/logout.do">退出</a>
					</span>
				</c:if>
			</p>
			<ul class="sn-quick-menu">
				<li class="myiGo"><i class="am-icon-user"></i> <a href="myorders.do">我的爱购</a>
				</li>
				<li class="sn-mybrand"><i class="am-icon-heart"></i> <a href="">我关注的品牌</a>
				</li>
				<li class="sn-cart"><i class="am-icon-shopping-cart"></i> <a
					href="myshoppingCart.do">购物车</a> <c:set property="${sessionScope.map3 }"
						var="shoppingcart"></c:set> <span name="count"> <c:out
							value="${fn:length(shoppingcart)}"></c:out>
				</span> 件</li>
			</ul>
		</div>
	</div>
	<!--标题&搜索-->
	<div class="header">
		<div class="header-con">
			<h1 class="iGologo">
				<a href="">爱购iGo.com</a>
			</h1>
			<div class="search" name="search">
				<form action="" name="searchTop">
					<input type="text" placeholder="潮女冬季必备" name="good"
						class="search-inp">
					<button type="submit" class="search-btn">搜索</button>
				</form>
			</div>
		</div>
	</div>

	<hr data-am-widget="divider" style=""
		class="clear-float-both am-divider am-divider-default" />

	<!--订单商品详情列表-->
	<div class="clear"></div>
	<div class="concent">
		<!--地址 -->
		<div class="paycont">
			<div class="address">
				<h3>确认收货地址</h3>
				<div class="control">
					<div id="addnew" class="tc-btn createAddr theme-login am-btn am-btn-danger">使用新地址</div>
				</div>
				<div class="clear"></div>
				<ul>
				
					<c:forEach items="${sessionScope.u.addresses }" var="add">
					<li>
						<div class="per-border"></div>
						<c:if test="${add.isDefault==true }" var="rs">
							<li class="user-addresslist defaultAddr">
						</c:if>
						<c:if test="${!rs }">
							<li class="user-addresslist">
						</c:if>
						<div class="address-left">
							<div class="user DefaultAddr">

								<span class="buy-address-detail"> <span class="buy-user">${add.receiverName }
								</span> <span class="buy-phone">${add.phone }</span>
								</span>
							</div>
							<div class="default-address DefaultAddr">
								<span class="buy-line-title buy-line-title-type">收货地址：</span> <span
									class="buy--address-detail"> <span class="province">${add.province }</span>
									<span class="city">${add.city }</span> <span class="dist">${add.region }</span>
									<span class="street">${add.detailsAddress }</span>
								</span> </span>
							</div>
							<c:if test="${rs }">
								<ins class="deftip">默认地址</ins>
							</c:if>
						</div>
						<div class="address-right">
							<a href="person/address.html"> <span
								class="am-icon-angle-right am-icon-lg"></span></a>
						</div>
						<div class="clear"></div>

						<div class="new-addr-btn">
							<c:if test="${!rs }">
								<a href="#" class="">设为默认</a>
							</c:if>
							<span class="new-addr-bar hidden">|</span> <a href="#">编辑</a> <span
								class="new-addr-bar">|</span> <a href="javascript:void(0);"
								onclick="delClick(this);">删除</a>
						</div>

						</li>
						<div style="display: none">${add.addressId }</div>
					</c:forEach>

				</ul>

				<div class="clear"></div>
			</div>
			<!--物流 -->
			<div class="logistics">
				<h3>选择物流方式</h3>
				<ul class="op_express_delivery_hot">
					<li data-value="圆通" class="OP_LOG_BTN  "><i
						class="c-gap-right" style="background-position: 0px -468px"></i>圆通<span></span></li>
					<li data-value="申通" class="OP_LOG_BTN  "><i
						class="c-gap-right" style="background-position: 0px -1008px"></i>申通<span></span></li>
					<li data-value="韵达" class="OP_LOG_BTN  "><i
						class="c-gap-right" style="background-position: 0px -576px"></i>韵达<span></span></li>
					<li data-value="中通"
						class="OP_LOG_BTN op_express_delivery_hot_last "><i
						class="c-gap-right" style="background-position: 0px -324px"></i>中通<span></span></li>
					<li data-value="顺风"
						class="OP_LOG_BTN  op_express_delivery_hot_bottom"><i
						class="c-gap-right" style="background-position: 0px -180px"></i>顺丰<span></span></li>
				</ul>
			</div>
			<div class="clear"></div>

			<!--支付方式-->
			<div class="logistics">
				<h3>选择支付方式</h3>
				<ul class="pay-list">
					<li class="pay card"><img src="img/wangyin.jpg" />银联<span></span></li>
					<li class="pay qq"><img src="img/weizhifu.jpg" />微信<span></span></li>
					<li class="pay taobao"><img src="img/zhifubao.jpg" />支付宝<span></span></li>
				</ul>
			</div>
			<div class="clear"></div>





			<!--订单 -->

			<div class="concent">
				<div id="payTable">
					<h3>确认订单信息</h3>
					<div class="cart-table-th">
						<div class="wp">

							<div class="th th-item">
								<div class="td-inner">商品信息</div>
							</div>
							<div class="th th-price">
								<div class="td-inner">单价</div>
							</div>
							<div class="th th-amount">
								<div class="td-inner">数量</div>
							</div>
							<div class="th th-sum">
								<div class="td-inner">金额</div>
							</div>
							<div class="th th-oplist">
								<div class="td-inner">配送方式</div>
							</div>

						</div>
					</div>
					<div class="clear"></div>
					<c:forEach var="item" items="${sessionScope.map4}"
						varStatus="istatus">

						<tr class="item-list">
							<div class="bundle  bundle-last">
								<div class="bundle-hd">
									<div class="bd-promos">
										<div class="act-promo">店铺：</div>
										<div class="bd-has-promo">
											<a href="#" target="_blank">${item.key } <span class="gt">&gt;&gt;</span></a>&nbsp;&nbsp;
										</div>
										<span class="list-change theme-login">编辑</span>
									</div>
								</div>
								<div class="clear"></div>
								<div class="bundle-main">



									<c:forEach items="${item.value }" var="each">
										<div class="bundle-main">
											<ul class="item-content clearfix">
												<div class="pay-phone">
													<li class="td td-item">
														<div class="item-pic">
															<a href="#" class="J_MakePoint"> <img
																style="width: 80px; height: 80px"
																src="uploads/${each.productExample.productImgAdd }"
																class="itempic J_ItemImg"></a>
														</div>
														<div class="item-info">
															<div class="item-basic-info">
																<a href="#" class="item-title J_MakePoint"
																	data-point="tbcart.8.11">${each.productExample.productName }</a>
															</div>
														</div>
													</li>
													<li class="td td-info">
														<div class="item-props">
															<span class="sku-line">${each.productExample.desciption }</span>
															<!-- 
                                                <span class="sku-line">尺码：170/88A/L</span>
                                                 -->
														</div>
													</li>
													<li class="td td-price">
														<div class="item-price price-promo-promo">
															<div class="price-content">
																<em class="J_Price price-now">${each.productExample.price }</em>元
															</div>
														</div>
													</li>
												</div>
												<li class="td td-amount">
													<div class="amount-wrapper ">
														<div class="item-amount ">
															<span class="phone-title">购买数量</span>
															<div class="sl">${each.amount }</div>
														</div>
													</div>
												</li>
												<li class="td td-sum">
													<div class="td-inner">
														<em tabindex="0" class="J_ItemSum number">
															${each.amount*each.productExample.price }</em>元
													</div>
												</li>
												<li class="td td-oplist">
													<div class="td-inner">
														<span class="phone-title">配送方式</span>
														<div class="pay-logis">
															快递<b class="sys_item_freprice">10</b>元
														</div>
													</div>
												</li>

											</ul>
											<div class="clear"></div>
										</div>
									</c:forEach>
									<div class="clear"></div>
								</div>
						</tr>
					</c:forEach>



					<div class="clear"></div>
					<div class="pay-total">
						<!--留言-->
						<div class="order-extra">
							<div class="order-user-info">
								<div id="holyshit257" class="memo">
									<label>买家留言：</label> <input id="message" type="text"
										title="选填,对本次交易的说明（建议填写已经和卖家达成一致的说明）"
										placeholder="选填,建议填写和卖家达成一致的说明"
										class="memo-input J_MakePoint c2c-text-default memo-close">
									<div class="msg hidden J-msg">
										<p class="error">最多输入500个字符</p>
									</div>
								</div>
							</div>

						</div>
						<!--优惠券 -->
						<div class="buy-agio">
							<li class="td td-coupon"><span class="coupon-title">优惠券</span>
								<select data-am-selected>
									<option value="a">
										<div class="c-price">
											<strong>￥8</strong>
										</div>
										<div class="c-limit">【消费满95元可用】</div>
									</option>
									<option value="b" selected>
										<div class="c-price">
											<strong>￥3</strong>
										</div>
										<div class="c-limit">【无使用门槛】</div>
									</option>
							</select></li>

							<li class="td td-bonus"><span class="bonus-title">红包</span>
								<select data-am-selected>
									<option value="a">
										<div class="item-info">
											¥50.00<span>元</span>
										</div>
										<div class="item-remainderprice">
											<span>还剩</span>10.40<span>元</span>
										</div>
									</option>
									<option value="b" selected>
										<div class="item-info">
											¥50.00<span>元</span>
										</div>
										<div class="item-remainderprice">
											<span>还剩</span>50.00<span>元</span>
										</div>
									</option>
							</select></li>

						</div>
						<div class="clear"></div>
					</div>
					<!--含运费小计 -->
					<div class="buy-point-discharge ">
						<p class="price g_price ">
							合计（含运费） <span>¥</span><em class="pay-sum">2697.00</em>
						</p>
					</div>

					<!--信息 -->
					<div class="order-go clearfix">
						<div class="pay-confirm clearfix">
							<div class="box">
								<div tabindex="0" id="holyshit267" class="realPay">
									<em class="t">实付款：</em> <span class="price g_price "> <span>¥</span>
										<em class="style-large-bold-red " id="J_ActualFee">2697.00</em>
									</span>
								</div>

								<div id="holyshit268" class="pay-address">
									<c:forEach items="${sessionScope.u.addresses }" var="add">
										<c:if test="${add.isDefault==true }">
											<p class="buy-footer-address">
												<span class="buy-line-title buy-line-title-type">寄送至：</span>
												<span class="buy--address-detail"> <span
													class="province">${add.province }</span> <span class="city">${add.city }</span>
													<span class="dist">${add.region }</span> <span
													class="street">${add.detailsAddress }</span>
												</span> </span>
											</p>
											<p class="buy-footer-address">
												<span class="buy-line-title">收货人：</span> <span
													class="buy-address-detail"> <span class="buy-user">${add.receiverName }
												</span> <span class="buy-phone">${add.phone }</span>
												</span>
											</p>
										</c:if>
									</c:forEach>
								</div>
							</div>

							<div id="holyshit269" class="submitOrder">
								<div class="go-btn-wrap">
									<a id="J_Go" href="javascript:void(0);" class="btn-go"
										tabindex="0" title="点击此按钮，提交订单">提交订单</a>
								</div>
							</div>
							<div class="clear"></div>
						</div>
					</div>
				</div>

				<div class="clear"></div>
			</div>
		</div>
		<div class="footer">
			<div class="footer-hd">
				<p>
					<a href="#">爱购科技</a> <b>|</b> <a href="#">商城首页</a> <b>|</b> <a
						href="#">支付宝</a> <b>|</b> <a href="#">物流</a>
				</p>
			</div>
			<div class="footer-bd">
				<p>
					<a href="#">关于爱购</a> <a href="#">合作伙伴</a> <a href="#">联系我们</a> <a
						href="#">网站地图</a> <em>(c) 2016-2026 iGo.com 版权所有</em>
				</p>
			</div>
		</div>
	</div>
	<div class="theme-popover-mask"></div>
	<div class="theme-popover">

		<!--标题 -->
		<div class="am-cf am-padding">
			<div class="am-fl am-cf">
				<strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add
					address</small>
			</div>
		</div>
		<hr />

		<div class="am-u-md-12">
			<form class="am-form am-form-horizontal">

				<div class="am-form-group">
					<label for="user-name" class="am-form-label">收货人</label>
					<div class="am-form-content">
						<input type="text" id="user-name" placeholder="收货人">
					</div>
				</div>

				<div class="am-form-group">
					<label for="user-phone" class="am-form-label">手机号码</label>
					<div class="am-form-content">
						<input id="user-phone" placeholder="手机号必填" type="email">
					</div>
				</div>

				<div class="am-form-group">
					<label for="user-phone" class="am-form-label">所在地</label>
					<div class="am-form-content address">
						<select id="province" data-am-selected>
						<option value="">请选择</option>
						</select> 
						<select id="city" data-am-selected>
						<option value="">请选择</option>
						</select> <select id="region" data-am-selected>
						</select>
					</div>
				</div>

				<div class="am-form-group">
					<label for="user-intro" class="am-form-label">详细地址</label>
					<div class="am-form-content">
						<textarea id="detailstreet" class="" rows="3" id="user-intro"
							placeholder="输入详细地址"></textarea>
						<small>100字以内写出你的详细地址...</small>
					</div>
				</div>

				<div class="am-form-group theme-pop">
					<div class="am-u-sm-8 am-u-sm-push-4">
						<div id="address_add" class="am-btn am-btn-danger">保存</div>
						<div class="am-btn am-btn-danger close">取消</div>
					</div>
				</div>
			</form>
		</div>

	</div>

	<div class="clear"></div>
	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
$(function(){
	calcAll();
	$("#addnew").click(function(){
		$.ajax({
			url:base_path+"/loadprovinces.do",
			type:"get",
			dataType:"json",
			success:function(result){
				if(result.status==0){
					$province = $("#province");
					var items = result.data;
					$province.empty();
					$province.append("<option value=\"\">请选择</option>");
					for(var i=0;i<items.length;i++){
						var sli = "<option value=\""+items[i].provinceName+"\" data-id=\""+items[i].provinceId+"\">"+items[i].provinceName+"</option>";
						$province.append(sli);
					}
					return;
				}
			},
			error:function(){
				alert("服务器繁忙请稍后重试");
			}
		});
	});
	
	
	$("#province").change(function(){
		var provinceId = $("#province option:selected").attr("data-id");
		
		$.ajax({
			url:base_path+"/loadcitys.do",
			type:"get",
			data:{
				"provinceId" : provinceId
			},
			dataType:"json",
			success:function(result){
				if(result.status==0){
					$province = $("#city");
					var items = result.data;
					$province.empty();
					$province.append("<option value=\"\">请选择</option>");
					for(var i=0;i<items.length;i++){
						var sli = "<option value=\""+items[i].cityName+"\" data-id=\""+items[i].cityId+"\">"+items[i].cityName+"</option>";
						$province.append(sli);
					}
					return;
				}
			},
			error:function(){
				alert("服务器繁忙请稍后重试");
			}
		});
	});
	
	$("#city").change(function(){
		var cityId = $("#city option:selected").attr("data-id");
		
		$.ajax({
			url:base_path+"/loadregion.do",
			type:"get",
			data:{
				"cityId" : cityId
			},
			dataType:"json",
			success:function(result){
				if(result.status==0){
					$province = $("#region");
					var items = result.data.regions;
					$province.empty();
					$province.append("<option value=\"\">请选择</option>");
					for(var i=0;i<items.length;i++){
						var sli = "<option value=\""+items[i].regionName+"\" data-id=\""+items[i].regionId+"\">"+items[i].regionName+"</option>";
						$province.append(sli);
					}
					return;
				}
			},
			error:function(){
				alert("服务器繁忙请稍后重试");
			}
		});
	});
	
	
	})



function calcAll(){
	var $money = $(".J_ItemSum,number");
	var $send = $(".sys_item_freprice");
	var m1 =0;
	var m2 =0;
		for(var i =0;i<$money.length;i++){
			m1+=parseInt($money.eq(i).text());
			m2+=parseInt($send.eq(i).text());
		}
	$(".pay-sum").text(m1+m2);	
	$("#J_ActualFee").text(m1+m2);
}

$(".address").on("click", ".user-addresslist", function(){
	$(this).addClass("defaultAddr").siblings().removeClass("defaultAddr");
	var province= $(this).find(".province").text();
	$(".pay-confirm .province").html(province);
	var city = $(this).find(".city").text();
	$(".pay-confirm .city").html(city);
	var dist = $(this).find(".dist").text();
	$(".pay-confirm .dist").html(dist);
	
	var street = $(this).find(".street").text();
	$(".pay-confirm .street").html(street);
	var user = $(this).find(".buy-user").text();
	$(".pay-confirm .buy-user").html(user);
	
	var phone = $(this).find(".buy-phone").text();
	$(".pay-confirm .buy-phone").html(phone);	
});


$("#J_Go").click(function(){
	 
	var addressId = $(".defaultAddr").next().text();
	var yunsong = $(".OP_LOG_BTN.selected").attr("data-value");
	if(addressId==null||addressId ==""){
		alert("请添加收货地址");
		return false;
	}
	if(yunsong =="" ||yunsong==null){
		alert("请选择物流方式");
		return false;
	}
	
	var payway = $(".pay.selected").text();
	if(payway =="" ||payway==null){
		alert("请选择支付方式");
		return false;
	}
	
	var message = $("#message").val();
	var totalmoney = $("#J_ActualFee").text();
	var $amounts =$(".sl");
	var totalamounts = 0;
	for(var i=0;i< $amounts.length;i++){
		totalamounts+=parseInt($amounts.eq(i).html().trim());
	}
	
	$.ajax({
		url:base_path+"/toPay.do",
		type:"post",
		data:{
			"addressId" : addressId,
			"yunsong"  : yunsong,
			"payway" :payway,
			"message" : message,
			"totalmoney":totalmoney,
			"totalamounts":totalamounts
		},
		dataType:"json",
		success:function(result){
			if(result.status==0){
				window.location.href=base_path+"/alipayapi.jsp";	
				return;
			}
			if(result.status==1){
				alert(result.msg);
			}
		},
		error:function(){
			alert("下单失败请重试");
		}
	});
	//后台已经有选中宝贝的ID了？
	return false;
})

$("#address_add").click(function(){
	//这里需要一些校验
	//TODO
	var receivername = $("#user-name").val().trim();
	var phone = $("#user-phone").val().trim();
	var province = $("#province").val();
	var city = $("#city").val();
	var region = $("#region").val();
	var details = $("#detailstreet").val();
	
	$.ajax({
		url:base_path+"/addAddress.do",
		type:"post",
		data:{
			"receivername" : receivername,
			"phone"  : phone,
			"province" :province,
			"city" : city,
			"region":region,
			"details":details
		},
		dataType:"json",
		success:function(result){
			if(result.status==0){
				var item = result.data;
				var sli = "";
				sli+="<li>";
                sli+="<div class=\"per-border\"></div>";
				sli+="<li class=\"user-addresslist\">";
				sli+=    "<div class=\"address-left\">";
				sli+=   "<div class=\"user DefaultAddr\">";
				sli+=   "<span class=\"buy-address-detail\">";   
				sli+=  "<span class=\"buy-user\">"+item.receiverName+"</span>";
				sli+= "<span class=\"buy-phone\">"+item.phone+"</span>";
				sli+= "</span>"
				sli+="</div>"
				sli+="<div class=\"default-address DefaultAddr\">";
				sli+="<span class=\"buy-line-title buy-line-title-type\">收货地址：</span>";
				sli+="<span class=\"buy--address-detail\">";
				sli+="<span class=\"province\">"+item.province+"</span>";
				sli+="<span class=\"city\">"+item.city+"</span>";
				sli+="<span class=\"dist\">"+item.region+"</span>";
				sli+="<span class=\"street\">"+item.detailsAddress+"</span>";
				sli+="</span>";
				sli+="</span>";
				sli+="</div>";
				sli+="</div>";
				sli+="<div class=\"address-right\">";
				sli+="<a href=\"person/address.html\">";
				sli+="<span class=\"am-icon-angle-right am-icon-lg\"></span></a>";
				sli+="</div>";
				sli+="<div class=\"clear\"></div>";
				sli+="<div class=\"new-addr-btn\">";
				sli+="<a href=\"#\" class=\"\">设为默认</a>";
				sli+="<span class=\"new-addr-bar hidden\">|</span>";
				sli+="<a href=\"#\">编辑</a>";
				sli+="<span class=\"new-addr-bar\">|</span>";
				sli+="<a href=\"javascript:void(0);\" onclick=\"delClick(this);\">删除</a>";
				sli+="</div>";
				sli+="</li>";
				sli+="<div style=\"display:none\" >"+item.addressId+"</div>";
				$(".address ul").append(sli);
				alert("添加地址成功");
				 $(document.body).css("overflow", "visible");
			        $('.theme-login').removeClass("selected");
			        $('.item-props-can').removeClass("selected");
			        $('.theme-popover-mask').hide();
			        $('.theme-popover').slideUp(200);
			}
		},
		error:function(){
			alert("添加地址失败请稍后重试");
		}
	});
	
	
})
</script>
</body>

</html>